import React from "react";
import {Card,Button,Table,Modal,message} from "antd";
// api
import {reqDeleteUser, reqUsers, reqAddOrUpdateUser} from "@api/user";
import LinkButton from '@/components/link-button'
import formateDate from '@/utils/dateFormat'
import UserForm from './UserForm'


export default class List extends React.Component {
    UserForm = React.createRef()
    state={
       
        defaultValue:true,
        loading:false,
        users: [], // 所有用户列表
        roles: [], // 所有角色列表
        isShow: false, // 是否显示确认框
    }
    initColumns = () => {
        this.columns = [
          {title: '用户名', dataIndex: 'username'},
          {title: '邮箱', dataIndex: 'email'},
          {title: '电话', dataIndex: 'phone'},
          {title: '注册时间',dataIndex: 'create_time', render: formateDate},
          {title: '所属角色',dataIndex: 'role_id',render:(role_id)=>this.roleNames[role_id]},
          {title: '操作', render: (user) => (<span><LinkButton onClick={() => this.showUpdate(user)}>修改</LinkButton>
                                                    <LinkButton onClick={() => this.deleteUser(user)}>删除</LinkButton></span>)},
        ]
    }
    formRef=React.createRef()
    UNSAFE_componentWillMount(){
        this.initColumns()
    }
    componentDidMount(){
        this.getUsers()
    }
    initRoleNames=(roles)=>{
        // 根据role数组 生成包含所有角色名的对象（属性名角色id值）
        const roleNames = roles.reduce((pre,role)=>{
            pre[role._id] = role.name
            return pre
        },{})
        // 保存起来一堆的rolesName
        this.roleNames = roleNames
    }
    // 加载用户列表
    getUsers=async ()=>{
        const result = await reqUsers()
        if(result.status===0){
            const {roles,users} = result.data
            // 初始化行的名字
            this.initRoleNames(roles)
            this.setState({users,roles})
        }
    }
    // 更新或者修改用户
    addOrUpdateUser=async ()=>{
        this.setState({isShow:false})
        const user = this.UserForm.current.getFormValues()
        //   如果是更新, 需要给user指定_id属性
        if(this.user){
            user._id = this.user._id
        }
        const result = await reqAddOrUpdateUser(user)
        if(result.status === 0){
            message.success(`${this.user?'修改':'添加'}`+'用户成功')
            this.getUsers()
        }else{
            message.error(`${this.user?'修改':'添加'}`+'用户失败')
        }
        // 重置表单字段值
        this.UserForm.current.formRef.current.resetFields()
    }
    // 删除用户
    deleteUser=async (user)=>{
        Modal.confirm({
            title:'确定删除'+user.username+'吗？',
            okText:'确定',
            cancelText:'取消',
            onOk:async ()=>{
                const result = await reqDeleteUser(user._id)
                if(result.status === 0){
                    message.success('删除用户成功')
                    this.getUsers()
                }
            }
        })

    }
        /*
    显示添加界面
    */
    showAdd = () => {
        this.user = null // 去除前面保存的user
        this.setState({isShow: true})
    }

    /*
    显示修改界面
    */
    showUpdate = (user) => {
        this.user = user // 保存user
        this.setState({
        isShow: true
        })
    }

    onFinish=(value)=>{
        // console.log(value);
        // if(!value.name){
        //     message.warning('用户名不能为空')
        //     return false
        // }
        // if(!value.number||value.number === 0){
        //     message.warning('用户数量不能为空')
        //     return false
        // }
        // if(!value.description){
        //     message.warning('用户描述不能为空')
        //     return false
        // }
        // this.setState({loading:true})
        // addUser(value).then(response=>{
        //     message.success('添加成功')
        // }).catch(err=>{
        //     message.error('添加失败')
        // })
        // this.setState({loading:false})
        // this.formRef.current.resetFields()
    }


    render(){
        const {roles,isShow,users} = this.state
        const user = this.user || {}
        const title = <Button type='primary' onClick={this.showAdd}>创建用户</Button>
        return(
            <Card title={title} >
                <Table rowKey='_id' columns={this.columns} dataSource={users}  pagination={{defaultPageSize: 5}} bordered/>
                <Modal destroyOnClose title={user._id?'修改用户':'添加用户'} visible={isShow} onOk={this.addOrUpdateUser} onCancel={()=>{this.setState({isShow:false});this.UserForm.current.formRef.current.resetFields()}} okText="确认"  cancelText="取消">
                    <UserForm ref={this.UserForm} roles={roles} user={user} />
                </Modal>
            </Card>
        )
    }
   }

